<template>
    <div>
      <commpVxeTable
        :key="reCommpVxeTable"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
        <template v-slot:operation_fhtzfjd="{row}" data-desc="自定操作栏">
            <span>{{ fhtzfjdNum(row.fhtzfjd) }}</span>
        </template>
      </commpVxeTable>
    </div>
  </template>
  <script>
  import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
  import YchConstant from "@/api/YchConstant";
  export default {
    components: {
      commpVxeTable
    },
    props:{
    },
    data() {
      return {
        reCommpVxeTable: '',
        dataTableConfig: {
          api: YchConstant.SPZX_OA + '/nkRsHtgl/queryHtStatPageList',
          rowId: 'id',
          urlType: true,
          paramet:{}
        },
        formItem: [
          {
            label: '报销开始时间',
            model: 'startTime',
            type: 'datePicker',
            format: 'YYYY-MM-DD'
          },{
            label: '报销结束时间',
            model: 'endTime',
            type: 'datePicker',
            format: 'YYYY-MM-DD'
          },{
            label: '合同编号',
            model: 'fhtbh',
          },{
            label: '合同名称',
            model: 'fhtmc',
          },{
            label: '合同类型',
            model: 'fhtlx',
          },{
            label: '签订公司',
            model: 'qdgs',
          },{
            label: '报销人',
            model: 'fbxr',
          },{
            label: '预算项目名称',
            model: 'fysxmmc',
          },{
            label: '预算所属部门',
            model: 'fbm',
          },
        ],
        columnsVxe: [
          {
            type: 'checkbox',
            width: 60,
            fixed: 'left'
          },{
            title: '合同编号',
            field: 'fhtbh',
          },{
            title: '合同名称',
            field: 'fhtmc',
          },{
            title: '合同类型',
            field: 'fhtlx',
          },{
            title: '签订金额',
            field: 'fhtje',
          },{
            title: '签订时间',
            field: 'qdsj',
          },{
            title: '签订公司',
            field: 'qdgs',
          },{
            title: '合同支付进度',
            field: 'fhtzfjd',
            slots: {
                    default: 'operation_fhtzfjd',
                },
          },{
            title: '报销金额',
            field: 'fbxje',
          },{
            title: '报销时间',
            field: 'fbxsj',
          },{
            title: '报销人',
            field: 'fbxr',
          },{
            title: '预算项目名称',
            field: 'fysxmmc',
          },{
            title: '预算所属部门',
            field: 'fbm',
          },{
            title: '指标结余',
            field: 'fzbjy',
          },
        ],
        idList: [],
        passObj: {},
      }
    },
    methods: {
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.idList = []
            if(val.length){
            val.forEach(item => {
                this.idList.push(item.id)
            });
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
            //console.log(this.dataTableConfig.paramet)
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        fhtzfjdNum(num){
            if(num){
                var number = Number(num * 100).toFixed(2) + '%'//保留两位小数
                return number
            }
        },
    },
  }
  </script>
  <style lang="less">
  .red-btn{
      color:  white !important;
      border: 1px solid #ed5565 !important;
      background-color: #ed5565 !important;
  }
  </style>
